<link href="__PUBLIC__/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
<script src="__PUBLIC__/Home/jquery.js"></script>
<script src="__PUBLIC__/jquery-ui/jquery-ui.min.js"></script>
<script src="__PUBLIC__/jqPaginator-master/dist/jqPaginator.min.js"></script>
 <style type="text/css">
 #dia{
		background-color:#ccffcc;
		width:150px;
		padding:40px;
		position:absolute;
		left:50%;
		margin-left:-100px;
		top:40px;
		display:none;
	}

div{
   text-align:center;margin:10px 0px;
   }

#page{
   text-align:center;
}
	
</style> 
<div class="bd">
<form action="<{:U('Admin/User/userList')}>" method='post' role="search">
  <div>
	<input type="text" name="search" id="birds"/>
	<input type="hidden" class='hid' value='<{$sear}>'>
	<input type="submit" value="搜索">
  </div>
</form>

<div id='users'></div>
<table width="98%" border="0" cellpadding="2" cellspacing="1" bgcolor="#CFCFCF" align="center" style="margin-top:8px">
    <tr bgcolor="#ffffff">
		<td height="36" colspan="10" id="page"> 
			<for start="1" end="$pagenums+1">
				<span id="p" data-type='<{$i}>'><{$i}></span>
			</for>
		</td>
	</tr>
</table>

<div id="dialog-confirm" style="display:none" >
      <h3>用户信息修改</h3>
	  <p><input type="hidden" name='uid' /></p>
      <p>用户名<input type="text" name='user_name'/></p>
      <p>电话<input type="text" name='user_tel'/></p>
      <p>邮箱<input type="text" name='user_email'/></p>   
</div>

<div id="dia"></div>

</div>

<script>

$(function(){
	$('#page span').click(function(){
	var sear = $('.hid').val();
	var p = $(this).attr("data-type");
		$.get('<{:U("queryUser")}>',{p:p,sear:sear},function(data){
			var html='<tr align="center" bgcolor="#FBFCE2" height="25"> <td>选项</td> <td>编号</td> <td>用户名</td> <td>电话</td> <td>邮箱</td> <td>头像(大)</td> <td>头像(中)</td> <td>头像(小)</td> <td>操作</td> </tr>';
			$(data).map(function(k,v){
				html += '<tr align="center" bgcolor="#FFFFFF" height="26" align="center"  id="user_'+v.uid+'"><td><input type="checkbox" class="c1" name="row[]" /></td><td>'+v.uid+'</td><td>'+v.uname+'</td><td>'+v.tel+'</td><td>'+v.email+'</td><td><img width="60px" src="__ROOT__/'+v.photo+'" alt="" /></td><td><img width="60px" src="__ROOT__/'+v.photo1+'" alt="" /></td><td><img width="60px" src="__ROOT__/'+v.photo2+'" alt="" /></td><td><input type="button" name="del"  value="删除" data-uid="'+v.uid+'"><input type="button" name="edit"  value="修改" data-uid="'+v.uid+'"></td></tr>';
				
			});
			html +='<tr bgcolor="#ffffff"> <td height="36" colspan="10"> <input id="s_all" type="button" value="全选" /> <input id="c_all" type="button" value="取消"> <input id="f_all" type="button" value="反选" /> </td> </tr>';
			$('#users').html(html);
			//删除
			$('[name="del"]').click(function(){
			  var uid = $(this).attr('data-uid');
			  $("<div>确定删除吗？</div>").dialog({
				modal: true,
				title:"删除",
				buttons:{
				"删除": function() {
				$(this).dialog( "close" );
				$.get('<{:U("del")}>',{uid:uid},function(data){
					if(data.state){
						$('#user_'+uid).remove();
						$('#dia').text(data.msg);
						$('#dia').slideDown('slow');
						setTimeout(function(){$('#dia').slideUp('slow')},3000);
					}else{
						$('#dia').text(data.msg);
					}		
				
				},'json');
			 
			},
				"取消": function() {
			  $( this ).dialog( "close" );
			}
		}
	});
		
	});

	$(document).on('click','[name=edit]',function(){
       var uid=$(this).attr('data-uid');
	   $('#dialog-confirm [name="uid"]').val(uid);
       $.get("<{:U('query')}>",{uid:uid},function(data){
          $("#dialog-confirm [name='user_name']").val(data.uname);
          $("#dialog-confirm [name='user_tel']").val(data.tel);
		  $("#dialog-confirm [name='user_email']").val(data.email);
        },'json');
      $("#dialog-confirm").dialog({
          resizable: false,
          height: "auto",
          width: 350,
          modal: true,
          title:'修改确认',
          buttons: {
            "确认": function() {
        var uid=  $('#dialog-confirm [name="uid"]').val();
        var uname=  $("#dialog-confirm [name='user_name']").val();
        var tel=  $("#dialog-confirm [name='user_tel']").val();  
        var email=  $("#dialog-confirm [name='user_email']").val();  
          $.post("<{:U('edit')}>",{uid:uid,uname:uname,tel:tel,email:email},function(data){
		  var uid = $('#dialog-confirm [name="uid"]').val();
          if(data.state){  
              $('#dia').text(data.msg);
              $('#dia').css("display","block");
              //点击修改后要将原来的数据替换
              $("#user_"+uid+" :eq(2)").text(uname);
              $("#user_"+uid+" :eq(3)").text(tel);
              $("#user_"+uid+" :eq(4)").text(email);
              setTimeout(function(){$('#dia').fadeOut('slow');},2000);
            }else{
              $('#dia').text(data.msg);
              $('#dia').css("display","block");
              setTimeout(function(){$('#dia').fadeOut('slow');},2000);    
            }
        },'json')
      
              $( this ).dialog( "close" );
            },
            "取消": function() {
              $( this ).dialog( "close" );
            }
          }
        });
      });
  
	//全选 反选	
	$("#s_all").click(function(){
					
				$(".c1").prop("checked",true);
					
			});
	$("#c_all").click(function(){
					
				$(".c1").prop("checked",false);
					
			});
	$('#f_all').click(function(){
			$('.c1').map(function(k,v){
			var flag=$(v).prop('checked')
			$(v).prop('checked',!flag);
		
			});
		});			
		
		},'json');
	});
	$('#page span:eq(0)').trigger('click');
	
	$("#birds" ).autocomplete({
		source: "<{:U('search')}>"
	});

});


</script>








